<template>
	<view>
		<uni-popup ref="delivModal" class="uni-propun-con" type="bottom" :isShow="isShow" @maskClick="maskClick">
			<view class="popup-content">
				<view class="uni-dialogCon flex justify-between padding-tb">
					<view class="belivery-title">请选择配送方式</view>
					<view class="action" @click="close()">
						<text class="fcon-a-close fcon-a-close-size"></text>
					</view>
				</view>
				<view class="flex flex-direction">
					<view class="cu-bar-flex-left" v-for="(item,index) in seletDelivery"
						@click.stop="seleData(item)" :class="{ active: selecItem.id==item.id }" :key="index">
						<text class="text-lg name">{{item.name}}</text>
						<view v-if="selecItem.id==item.id" class="icon"><text style="color: #53A87F;"
								class="fcon-xuanzhong"></text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed,onMounted } from 'vue';
	import { useShopStore } from '@/stores/shopStore';
	import { getSellerConfig } from '@/utils/public';
	const shopStore = useShopStore();
	const props = defineProps({
		isShow: {
			type: Boolean,
			default: false
		}
	});

	// 选择配送方式	
	const seletDelivery = ref([
		{
			id: '1131',
			name: '外卖配送'
		}
		// {
		// 	id: '1120',
		// 	name: '到店自取'
		// }
		// {
		// 	id: '1130',
		// 	name: '堂食'
		// },
	])
	const selecItem= ref({
		id:'1131',
		name:'外卖配送'
	})
	const emit = defineEmits(['maskClick','change'])
	const delivModal = ref()
	//配送选中
	const seleData = (item) => {
		selecItem.value = item
		emit('change',item)
		close()
	}
	onMounted(async()=>{
		
		
	})
	const inited = ref(false)
	const open = async() => {
		if(!inited.value){
			let cres:any = {};
			if(!shopStore.getCurDlvType){
				cres = await getSellerConfig();
			}
			selecItem.value = shopStore.getCurDlvType?shopStore.getCurDlvType:cres.sfitem;
			seletDelivery.value = shopStore.shopConfig.list||[];
			inited.value = true;
		}
		
		delivModal.value.open()
	}

	const maskClick = (e : any) => {
		emit('maskClick')
	}
	const close = () => {
		delivModal.value.close()
	}
	

	defineExpose({ open, close, maskClick })
</script>

<style lang="scss" scoped>
	.popup-content {
		width: 750rpx;
		border-radius: 16rpx 16rpx 0 0;
		padding: 10rpx 20rpx 50rpx 20rpx;
		background-color: #fff;
	}
	.cu-bar-flex-card {
		padding: 20rpx 23rpx !important;
		border-radius: 10px;
		margin-bottom: 30rpx;
		background: #FFF;
		box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
	}
	
	.cu-bar-flex-left {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #F3F3F3;
		padding: 30rpx 0;
		color: #333;
		font-weight: 400;
		&.active {
			color: #31AE5C !important;
			font-weight: 700;
			// .name{
			// 	font-weight: 700;
			// }
		}
	}
	
</style>